<template>
  <div class="popup-selector-demo">
    <section>
      <h1>默认</h1>
      <ZuiPopupSelector v-model="modelValue.popup" :options="options" />
    </section>
    <section>
      <h1>Disabled</h1>
      <ZuiPopupSelector v-model="modelValue.popup" :options="options" disabled />
    </section>
    <section>
      <h1>Readonly</h1>
      <ZuiPopupSelector :modelValue="[{ label: '汉族', value: '汉族' }]" :options="options" readonly />
    </section>
    <section>
      <h1>Readonly empty</h1>
      <ZuiPopupSelector v-model="modelValue.popup" :options="options" readonly />
    </section>
    <section>
      <h1>Vast Options</h1>
      <ZuiPopupSelector v-model="modelValue.popup" :options="vastOptions" direction="column" />
    </section>
    <section class="val">
      <h1>ModelValue</h1>
      <pre class="content"><code>{{modelValue}}</code></pre>
    </section>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const options = [
  { label: '汉族', value: '汉族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' }
]

const vastOptions = [
  { label: '汉族', value: '汉族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族', value: '达斡尔族' }
]
const modelValue = reactive({})
</script>

<style lang="scss" scoped>
section {
  margin-top: 8px;
  padding: 20px;
  background-color: #ffffff;
  h1 {
    line-height: 32px;
    font-weight: bold;
  }
}
</style>
